<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f0f2f5;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .register-container {
            background-color: white;
            width: 100%;
            max-width: 400px;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .title {
            text-align: center;
            margin-bottom: 25px;
        }

        .title h1 {
            color: #1a73e8;
            font-size: 28px;
            margin-bottom: 8px;
        }

        .title p {
            color: #5f6368;
            font-size: 16px;
        }

        .error-message {
            background-color: #feebea;
            border: 1px solid #fce8e6;
            color: #d93025;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 20px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        .error-message ul {
            margin-left: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #202124;
            font-weight: 500;
            font-size: 14px;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #dadce0;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: #1a73e8;
            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
        }

        .password-wrapper {
            position: relative;
        }

        .toggle-password {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #5f6368;
            cursor: pointer;
            font-size: 16px;
        }

        .toggle-password:hover {
            color: #1a73e8;
        }

        .btn-register {
            width: 100%;
            padding: 12px;
            background-color: #1a73e8;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn-register:hover {
            background-color: #1765cc;
        }

        .login-link {
            text-align: center;
            margin-top: 20px;
            color: #5f6368;
            font-size: 14px;
        }

        .login-link a {
            color: #1a73e8;
            text-decoration: none;
            font-weight: 500;
        }

        .login-link a:hover {
            text-decoration: underline;
        }

        .form-footer {
            margin-top: 30px;
            text-align: center;
            color: #5f6368;
            font-size: 12px;
        }

        @media (max-width: 480px) {
            .register-container {
                padding: 20px;
            }

            .title h1 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="register-container">
        <div class="title">
            <h1>登录账户</h1>
            <p>填写信息完成登录</p>
        </div>

        <!-- 错误提示区域 -->
        <div class="error-message" id="errorMessage">
            <ul id="errorList">
                <!-- 错误信息会通过JS动态添加 -->
            </ul>
        </div>

        <!-- 注册表单 -->
        <!-- <form id="registerForm" action="/api/users/register" method="POST"> -->
            <!-- 邮箱 -->
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" class="form-control" 
                       placeholder="your@email.com" required>
            </div>

            <!-- 密码 -->
            <div class="form-group">
                <label for="password">密码</label>
                <div class="password-wrapper">
                    <input type="password" id="password" name="password" class="form-control" 
                           placeholder="至少6个字符" required minlength="6">
                    <button type="button" class="toggle-password" id="togglePassword">
                        显示
                    </button>
                </div>
            </div>

            <!-- 注册按钮 -->
            <button type="submit" class="btn-register">登录账户</button>
        <!-- </form> -->

        <!-- 登录链接 -->
        <div class="login-link">
            还没有账户？<a href="/register">立即注册</a>
        </div>

        <div class="form-footer">
            注册即表示您同意我们的服务条款和隐私政策
        </div>
    </div>


    <script>
        // 密码显示/隐藏功能
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');
        const registerBtn = document.getElementsByClassName('btn-register')[0];
        
        togglePassword.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            togglePassword.textContent = type === 'password' ? '显示' : '隐藏';
        });

        const confirmPasswordInput = document.getElementById('confirmPassword');
        
        // 表单验证
        const registerForm = document.getElementById('registerForm');
        const errorMessage = document.getElementById('errorMessage');
        const errorList = document.getElementById('errorList');

        registerBtn.addEventListener('click',(e) => {
            let errors = [];

            // 显示错误信息
            if (errors.length > 0) {
                e.preventDefault(); // 阻止表单提交
                errorList.innerHTML = ''; // 清空之前的错误
                errors.forEach(error => {
                    const li = document.createElement('li');
                    li.textContent = error;
                    errorList.appendChild(li);
                });
                errorMessage.classList.add('show'); // 显示错误框
                
                // 3秒后自动隐藏错误框
                setTimeout(() => {
                    errorMessage.classList.remove('show');
                }, 3000);
            }
            fetch('/api/users/login',{
                method:"POST",
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    email: document.getElementById('email').value,
                    password: document.getElementById('password').value
                })
            }).then(res=> res.json()).then(data=>{
                    console.log(data)
                    if(data.code == 200){
                        alert(data.msg);
                        window.sessionStorage.setItem('Accesstoken',data.token);
                        window.location.href = '/';
                    }else{
                        alert(data.msg)
                    }
                })
        });
    </script>
</body>
</html>